<template>
  <div class="app-container">
    <div class="fundodoo-condition">
      <!-- <span>用户名:</span> -->
      <el-input
        v-model="userName"
        prefix-icon="el-icon-search"
        size="small"
        placeholder="请输入名称"
      />
    </div>
    <div>
      <ag-grid-vue
        style="width: 100%; height: 500px;"
        class="ag-theme-blue"
        :column-defs="columnDefs"
        :row-data="rowData"
        row-selection="multiple"
      />
    </div>

  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'
import { userList } from '@/api/user'

export default {
  name: 'App',
  components: {
    AgGridVue
  },
  data() {
    return {
      userName: null,
      columnDefs: null,
      rowData: null
    }
  },
  created() {
    this.fetchData()
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: 'Id', field: 'id', checkboxSelection: true },
      { headerName: 'Model', field: 'model' },
      { headerName: 'Price', field: 'price' }
    ]

    // fetch('https://api.myjson.com/bins/15psn9')
    //   .then(result => result.json())
    //   .then(rowData => this.rowData = rowData)
  },
  methods: {
    fetchData() {
      userList().then(response => {
        this.rowData = response.data
      })
    }
  }
}
</script>

<style>
</style>
